import React, { useState, useEffect } from 'react'
import { NavBar, Input, Button, SearchBar, Toast } from 'antd-mobile'
import { useNavigate, useLocation } from 'umi'
import Icon from '@/components/Icon'
import './index.scss'
import { fetchCate, fetchItem } from '@/api/home'
import Item from './item'
export default function index(props: {
  title: string
}) {
  const navigate = useNavigate()
  const location = useLocation()
  //  获取分类列表的信息
  const [lists, setLists] = useState([])
  const getLists = () => {
    fetchCate().then(res => {
      // console.log(res);
      if (res.data.code === 0) {
        setLists(res.data.data)
      }
    })
  }
  // 判断之前是否有搜素过
  const panduanSearch = () => {
    let search: any = JSON.parse(localStorage.getItem('search')) || []
    setArr(search)
  }
  // 最近搜素的关键词
  const [searchArr, setArr] = useState<any>([])


  // 根据关键词进行搜素
  const searchItem = (value: string) => {
    console.log(searchArr.length);

    let arr: any[] = []
    if (searchArr.length > 9) {
      if (!searchArr.includes(value)) {
        setArr(searchArr.splice(searchArr.length - 1))
        arr.unshift(value)
        setArr([
          ...arr,
          ...searchArr,
        ])
      } else if (searchArr.includes(value)) {
        Toast.show({
          content: '搜素内容已存在'
        })
      }
    } else {
      if (!searchArr.includes(value)) {
        arr.push(value)
        setArr([
          ...searchArr,
          ...arr
        ])
      } else if (searchArr.includes(value)) {
        Toast.show({
          content: '搜素内容已存在'
        })
      }
    }

    fetchItem({
      k: value
    }).then(res => {
      // console.log(res);
      if (res.data.code === 0) {
        setResult(res.data.data.result)
      }
      if (res.data.code === 700) {
        Toast.show({
          content: '搜素无结果'
        })
      }

    })
  }
  // 搜索的结果
  const [searchResult, setResult] = useState([])
  useEffect(() => {
    getLists()
    panduanSearch()
  }, [])
  // 返回商品列表
  const back = () => {
    localStorage.setItem('search', JSON.stringify(searchArr))
    navigate('/home')
  }
  // 点击商品进入商品闲情页面，并携带id
  const toCateDetail = (id: number) => {
    navigate(`/itemDetail?itemId=${id}`)
  }
  return (
    <>
      <NavBar onBack={back} right={(
        <div>搜素</div>
      )}>
        <SearchBar onSearch={(value) => {
          searchItem(value)
        }
        } placeholder="酒仙年货节：满999-100  +1元得招财小元宝酒" />
      </NavBar>
      <h3>
        热门搜素
      </h3>
      <div className='hotSearch'>
        {
          lists.map((item: any) => (
            <Button key={item.id} onClick={
              () => {
                navigate('/listDetail', {
                  state: {
                    name: item.name
                  }
                })
              }
            }>{item.name}</Button>
          ))
        }
      </div>
      <h3>
        最近搜素
      </h3>
      <div className='hotSearch'>
        {
          searchArr.map((item: any) => (
            <Button key={item}>{item}</Button>
          ))
        }
      </div>
      <Item itemsinger={searchResult} toCateDetail={toCateDetail} fn2={() => {

      }} />
    </>
  )
}
